<template>
	<view>
		<view :class="'search_top ' +(search_top_isfixed?'search_topFixed':'')">
			<view class="search_topBack" @tap="goback">
				<image src="../../../static/mall/goback.png" style="width: 26px; height: 26px;"></image>
			</view>
		    <uni-search-bar placeholder="搜索店铺内商品" class="searchTxt" @confirm="search" @cancel="cancel"/>
			<view class="icon_class" @click="goClass">
				<image src="../../../static/mall/icon_class.png" style="width: 30px; height: 30px;"></image> 
				 
			</view>
		</view>  
		<view class="goods_box">
		  <view class="goods_List" v-if="goodsList && goodsList.length > 0">
			   <view v-for="(item, index) in goodsList" :key="index" 
				class="goods_block  goods_blockListSearch"  
				@click="goUrl(item.url)"  >
				   <view class="goods_Img">
					<image :src="item.image" lazy-load="true" mode="aspectFill" :style="{ height:(windowWidth/2 - 15)+'px' }"></image> 
				   </view> 
				   <view class="goods_txtBox"> 
					   <view class="goods_txt">
						<view class="goods_name">{{ item.name }} </view> 
						<view class="goods_kd">	运费 ¥{{ item.freight_value }}  </view>
						<view class="goods_price">
							<view class="goods_pricepd">¥  <text>{{ item.price }}</text></view>
							<view class="goods_priceNum">{{ item.sell_count }}人付款</view> 
						</view>
						<view class="icon_cart"><image src="../../../static/mall/icon_cart.png"></image></view>
					   </view>
				   </view> 
				</view>  
				<uni-load-more  :loadingType="loadingType" :contentText="contentText" ></uni-load-more>
			 </view>
			 
			<view v-show="tips" style="text-align: center; padding-top: 30px;">
				 <image src="../../../static/mall/no_tip.png" style="width: 155px; height: 128px; "></image>
				 <p>暂无结果</p>
			 </view>
			 
		</view>  
	</view>
</template>

<script>
	import UniSearchBar from "@/appComponent/uni/uni-search-bar/uni-search-bar.vue"
	import UniLoadMore  from "@/appComponent/uni/uni-load-more/uni-load-more.vue"
	var common = require('../../../utils/common.js');
	var mall_common = require('../../mall/js/common.js');
	var shop_common = require('../../../utils/shop/common.js');
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
	var app = getApp();
	var that,
	page = 1,
	timer = null,
	store_id ='',
	keyword;
	export default{
		data(){
			return{
				goodsList:[],
				windowWidth:windowWidth,
				search_top_isfixed:false,
				loadingText: '加载中...',
				loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
					contentdown:'',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				tips:false
			 
			}
		},
		components: {
			UniSearchBar,
			UniLoadMore
		},
		onLoad(option){
			that = this;
			store_id = option.store_id
			// shop_common.getStorage('store_id').then(data=>{
			// 	console.log(data) 
			// 	if(store_id!=data){
			// 		shop_common.setStorage('store_id',store_id) 
			// 		mall_common.initData(store_id);
			// 	}else{
			// 	    store_id = data
			// 	}
			// })
			// mall_common.initData(store_id);
		},
		methods:{ 
			onReachBottom: function() {  
				if (timer != null) {
					clearTimeout(timer);
				}
				timer = setTimeout(function() { 
					that.getGoodsList(keyword);
				}, 1000);  
			}, 
			goUrl(option){
				if(option){
					window.location.href = option
				} 
			},
			 getGoodsList: function(keyword) {
				 if(keyword){  
					 if(page == 1){
					 	this.loadingType = 0;
					 }else{
					 	if (that.loadingType !== 0) {//loadingType!=0;直接返回
					 		return false;
					 	}
					 	that.loadingType = 1; 
					 }
					 uni.showNavigationBarLoading();//显示加载动画 
					 var Param={
					 	store_id:store_id,
					 	sort_id:'',
					 	sort_level:'', 
					 	order:'',
					 	page:page,
					 	page_size:10,
					 	keyword:keyword
					 } 
					 common.post('Mall&a=get_store_goods_list',Param, data => {  
						 that.tips = false
					 	if(page == 1){  
							if(data.goods_list.length ==0){
								that.tips = true
							}
							
					 		that.goodsList = data.goods_list;
					 		uni.hideNavigationBarLoading();
					 		uni.stopPullDownRefresh();//得到数据后停止下拉刷新
							
					 	}else{
					 		if (data == null) {//没有数据
					 			that.loadingType = 2;
					 			uni.hideNavigationBarLoading();//关闭加载动画 
								that.contentText.contentdown = "没有相关产品"
					 			return;
					 		}
					 		that.goodsList = that.goodsList.concat(data.goods_list);//将数据拼接在一起
					 		that.loadingType = 0;//将loadingType归0重置
					 		uni.hideNavigationBarLoading();//关闭加载动画
							that.contentText.contentdown = "已经加载完了！" 
					 	}
					 	page++;//得到数据之后page+1 
					 	
					 })
				 }else{
					 if(page == 1){
						that.contentText.contentdown = "没有相关产品"  
					 }
					 
				 } 
			}, 
			search(confirm){ 
				var that = this
				that.goodsList = ''
				console.log(confirm.value) 
				page = 1
				if(confirm.value){
					that.getGoodsList(confirm.value) 
					keyword = confirm.value
				}else{ 
					that.goodsList = ''
				}
				
			},
			cancel(cancel){
				var that = this
				console.log(cancel)
				that.goodsList = ''
			},
			goback(){  
				window.history.go(-1);
			},
			onPageScroll:function(e){
				if(e.scrollTop >10){ 
					this.search_top_isfixed = true
				}else{ 
					this.search_top_isfixed = false
				} 
			},
			goClass(){  
				window.location.href = 'goodsClass?store_id='+store_id
			}
			 
		}
		
	}
</script>

<style>
	@import url("../css/mall.css");
	.goods_List .goods_blockListSearch{
	 	width: 49%;
	}
	.goods_List .goods_blockListSearch:nth-child(2n){
		margin-left: 2%;
	}
	.goods_List{
		padding: 0 10px;
	}
	.search_top{ 
		position: relative; 
		padding:0 30px 0 40px;
		margin-top: 5px;
	}
	.search_topBack{
		position: absolute;
		left: 10px;
		top:10px;
		width: 26px;
		height: 26px;
	}
	.searchTxt{
		width: 100%;
	}
	.goods_blockListSearch ,.goods_Img,.goods_Img image{
		border-radius: 4px 4px 0 0;
	} 
	.search_top.search_topFixed{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		z-index: 88;
		margin-top: 0;
		background: #fff;
		box-sizing: border-box;
	}
	.icon_class{
		position: absolute;
		right: 10px;
		top:10px;
		z-index: 999; 
	}
	.goods_block .goods_name{
		overflow: hidden; 
		white-space: nowrap;
		text-overflow:ellipsis;
		color: #000; 
		font-size: 14px;
	}
</style>
